<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>서울의 일별 평균 대기오염도</title>
<meta name="description" content="서울의 일별 평균 대기오염도. 이 데모는 Leaflet을 사용해서 만들었습니다. 서울 열린 데이터 광장에서 데이터를 제공받고 있습니다. 지도 위에 서울의 구경계를 표시하고 오염물질과 날짜에 따라 대기오염 정도를 색상으로 표시하고 있습니다.">
<meta name="author" content="링크잇, http://linkit.kr">

<link href="assets/js/jquery-ui/Aristo/Aristo.css" rel="stylesheet">
<link href="assets/bootswatch/Cerulean/css/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<link rel="stylesheet" href="assets/js/leaflet/leaflet.css" />
<!--[if lte IE 8]>
		<link rel="stylesheet" href="assets/js/leaflet/leaflet.ie.css" />
	<![endif]-->

<link href="assets/css/main.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
  <![endif]-->

</head>

<body>

	<div id="container">

		<h1>
			서울의 일별 평균 대기오염도<br> 
		</h1>

		<div id="control">
			<input type="radio" id="radio1" name="type" value="NO2" checked>
			<label for="radio1">이산화질소</label>
			<input type="radio" id="radio2" name="type" value="O3">
			<label for="radio2">오존</label> 
			<input type="radio" id="radio3" name="type" value="CO">
			<label for="radio3">일산화탄소</label> 
			<input type="radio" id="radio4" name="type" value="SO2">
			<label for="radio4">아황산가스</label> 
			<input type="radio" id="radio5" name="type" value="PM10">
			<label for="radio5">미세먼지</label>

			<div class="date"></div>
		</div>

		<div id="slider-container">
			<div id="slider"></div>
		</div>

		<div id="map"></div>

		<footer>
		</footer>

	</div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
	<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="assets/js/leaflet/leaflet.js"></script>
	<script src="assets/js/spin.min.js"></script>
	<script src="assets/js/script.js"></script>
	<script src="assets/js/ga.js"></script>

	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-32332596-1' ]);
		_gaq.push([ '_trackPageview' ]);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>

</body>
<style>
#__dic_layer__ img{ width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none; display: inline; opacity:1;}#__dic_menulayer__ img{ width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none; display: inline; opacity:1;}#__dic_waitlayer__ img{ width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none; display: inline; opacity:1;}#__dic_layer__ a{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none;display: inline; background-color:transparent}#__dic_layer__ a:link{ color:#0860A8; }#__dic_layer__ a:visited{ color:#0860A8; }#__dic_layer__ a:active{ color:#0860A8;}#__dic_layer__ a:hover{ color:#0860A8; text-decoration:underline; }#__dic_layer__ div{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none;width:auto;height:auto; }#__dic_menulayer__ a{ display: inline; background-color:transparent}#__dic_layer__ tr{ width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none;font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__dic_layer__ td{ width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none;font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__table_source_open__ { width:auto;height:auto;margin:0px;padding:0px;background-color:transparent;border-color:transparent;border-width:0px;text-shadow:none; }#__dic_source_data__ div{ width:99%; }#__dic_layer__ p{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__dic_layer__ b{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__dic_layer__ ul{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none;width:auto;height:auto; padding:0px 0px 0px 4px; margin:0px; list-style-type: disc;}#__dic_layer__ li{ font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none;width:auto;height:auto; padding:0px 0px 0xp 8px; margin:0px; list-style-type: decimal; list-style-position: outside;}#__dic_layer__ span{font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__dic_layer__ option{font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none; }#__dic_layer__ select{font-size:10pt;color:black; font-family:Arial, Helvetica, sans-serif; text-align: left; letter-spacing:normal;line-height:normal;font-weight: normal;text-shadow:none;background-color:white;width:145px;height: 20px;display:inline-block;border:1px solid transparent;padding: 0px;margin:2px 0px 2px 0px;}
</style>
</html>
